<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>Payment and Rental</title>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="../../../../css/bootstrap.min.css" type="text/css" th:href="@{/css/bootstrap.min.css}"/>

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="../../../../font-awesome/css/font-awesome.min.css" type="text/css" th:href="@{/font-awesome/css/font-awesome.min.css}"/>

    <!-- Plugin CSS -->
    <link rel="stylesheet" href="../../../../css/animate.min.css" type="text/css" th:href="@{/css/animate.min.css}"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="../../../../css/creative.css" type="text/css" th:href="@{/css/creative.css}"/>

	<link rel="stylesheet" href="../../../../script/easyui/themes/icon.css" th:href="@{/script/easyui/themes/icon.css}" />
    <link rel="stylesheet" href="../../../../script/easyui/themes/black/easyui.css" th:href="@{/script/easyui/themes/black/easyui.css}" />
 
    <!-- side bar -->
    <link rel="stylesheet" href="../../../../css/sidebar.css" th:href="@{/css/sidebar.css}" /> 
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body id="page-top">

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="../index.html" th:href="@{/staff/}">Sakila Management System</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li sec:authorize="hasRole('ROLE_STAFF')">
						<form action="#" method="post" th:action="@{/staff/logout}">
							<input type="submit" value="Logout" class="btn btn-default"/>
						</form>
					</li>
					<li sec:authorize="hasRole('ROLE_STAFF')">
						<a class="btn" data-action="toggle" data-side="left" href="javascript:void(0)"><span sec:authentication="principal.staff.name">Member Name</span></a>
					</li>
                    <li>
                        <a class="page-scroll" href="../rental/add.html" th:href="@{goto_addRental}">New Order</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../rental/index.html" th:href="@{goto_viewOrder}">Order Manage</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../film/film.html" th:href="@{goto_viewFilms}">Film Manage</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../member/index.html" th:href="@{goto_memberManage}">Customer Manage</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    
<aside class="bg-dark">
	<div class="container">
		<div class="row">
            <div class="col-md-12">                      		
                <div id="chartContainer" style="height: 400px; width: 50%;" class="container"></div>
            </div>
        </div> 
		<div class="row">
            <div class="col-md-12 col-md-offset-7">                      		
                <button id="viewTopx" class="btn btn-primary">View Top5 Hot Categories</button>
            </div>
        </div>
	</div>	
 		<div class="header-content-inner">
                <!-- Table Section -->
			    <section id="payment" class="container content-section text-center">	
			    	<h2 style="color: #FFF">Payments</h2>
			        <table id="payments" toolbar="#searchBar"></table>
			    </section>
			    		    
			    <!-- List -->
				<div id="searchBar" style="padding:3px">
				    <span>Rental Date From: </span>
				    <input id="startDate" class="easyui-datebox" style="border:1px solid #ccc" />
				    <span>To: </span>
				    <input id="endDate"  class="easyui-datebox" style="border:1px solid #ccc" />
				    <span>Customer Id: </span>
				    <input id="customerId" style="border:1px solid #ccc" />
				    <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
				    <span style="color:#3399FF;position:relative;left:50px;" id="tableTitle"></span>
				</div>
            </div>
            
		<!-- Find By Id -->	    	             	
			    <section class="container content-section text-center">
			    	<h2 style="color: #FFF">Find By id</h2>	
               		<table id="onePayment" toolbar="#searchIdBar"></table>     
               	</section>  	
               	<div id="searchIdBar" style="padding:3px">
			    	<span>Payment Id: </span>
			    	<input id="paymentId" style="border:1px solid #ccc" />
			    	<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="doIdSearch()">Search</a>
			    </div>      			
    </aside>
    
    <!-- Side Bar -->
            <div class="sidebar left">
            	  <ul style="position: relative; top: 55px;left:20px;" class="list-group list-unstyled">
            	    <li class="list-group"><img src="../../../../images/no-pic.jpg" class="img-circle" 
            	  		th:src="@{'/images/staff_' + ${#authentication.principal.staff.id} + '.jpg'}"
            	  		th:onerror="'this.src=\'' + @{/images/no-pic.jpg} + '\';'" /></li>
            	    <li class="list-group"><h4 sec:authentication="principal.staff.name">Member Name</h4></li>
            	    <li class="list-group"><a href="#" class="btn btn-info" th:href="goto_changePassword">Change Password</a></li>
            	    <li class="list-group"><a href="#" class="btn btn-info" th:href="goto_changeAvatar">Change Avatar</a></li>
            	    <li sec:authorize="hasRole('ROLE_MANAGER')" class="list-group"><a href="#" class="btn btn-info" th:href="goto_addStaff">Add Staff</a></li>
            	  </ul>  	
            </div>
    
    <!-- jQuery -->
    <script src="../../../../script/jquery-2.1.4.min.js" th:src="@{/script/jquery-2.1.4.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../../../../script/bootstrap.min.js" th:src="@{/script/bootstrap.min.js}"></script>

    <!-- Plugin JavaScript -->
    <script src="../../../../script/jquery.easing.min.js" th:src="@{/script/jquery.easing.min.js}"></script>
    <script src="../../../../script/jquery.fittext.js" th:src="@{/script/jquery.fittext.js}"></script>
    <script src="../../../../script/wow.min.js" th:src="@{/script/wow.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../../../../script/creative.js" th:src="@{/script/creative.js}"></script>

    <script src="../../../../script/easyui/jquery.easyui.min.js" th:src="@{/script/easyui/jquery.easyui.min.js}"></script>
    <script src="../../../../script/staff/rental.js" th:src="@{/script/staff/rental.js}"></script>
    
    <script src="../../../../script/jquery.sidebar.min.js" th:src="@{/script/jquery.sidebar.min.js}"></script>
    <script src="../../../../script/sidebar.js" th:src="@{/script/sidebar.js}"></script>
    
    <script src="../../../../script/jquery.canvasjs.min.js" th:src="@{/script/jquery.canvasjs.min.js}"></script>
    <script src="../../../../script/charts.js" th:src="@{/script/charts.js}"></script>
</body>
</html>
